<template>
	<view>
		<div class="login-wrapper">
			<div class="shading">
				<!-- <image :src="logoUrl"/> -->
				<image :src="logoUrl"/>
				<!-- <image src="/static/images/logo2.png" v-if="!logoUrl" /> -->
			</div>
			<div class="whiteBg" >
				<div class="list">
					<form >
						<div class="item">
							<div class="acea-row row-middle">
								<image src="/static/images/phone_1.png"  style="width: 24rpx; height: 34rpx;"></image>
								<input type="text" class="texts" placeholder="输入登录账号" v-model="formData.account" required/>
							</div>
						</div>
						<div class="item">
							<div class="acea-row row-middle">
								<image src="/static/images/code_2.png" style="width: 28rpx; height: 32rpx;"></image>
								<input type="password" class="texts" placeholder="填写登录密码" v-model="formData.pwd" required />
							</div>
						</div>
						<div class="item">
							<div class="acea-row row-middle">
								<image src="/static/images/code_2.png" style="width: 28rpx; height: 32rpx;"></image>
								<input type="password" class="texts" placeholder="重复填写登录密码" v-model="formData.repeatPwd" required />
							</div>
						</div>
					</form>
				</div>
				<div class="logon" @click="registeruser" >注册</div>

			</div>
			<div class="bottom"></div>
		</div>
	</view>
</template>

<script>
	import {registerAccess} from "@/api/user.js"
	import {
		getLogo
	} from "@/api/public";
	export default {
		data() {
			return {
				logoUrl:'',
				formData:{
					account:'',
					pwd:'',
					repeatPwd:''
				}
			}
		},
		mounted: function() {
			this.getLogoImage();
		},
		methods: {
			async getLogoImage() {
				let that = this;
				getLogo().then(res => {
					that.logoUrl = res.data.logoUrl?res.data.logoUrl:'/static/images/logo2.png';
				});
			},
			registeruser(){
				if(!this.formData.account){
					uni.showToast({ title: '请输入登录账号', icon: 'none', duration: 2000 })
					return
				}
				if(!this.formData.pwd){
					uni.showToast({ title: '请输入登录密码', icon: 'none', duration: 2000 })
					return
				}
				if(!this.formData.repeatPwd){
					uni.showToast({ title: '请输入重复登录密码', icon: 'none', duration: 2000 })
					return
				}
				if(this.formData.pwd!=this.formData.repeatPwd){
					uni.showToast({ title: '请输入重复登录密码不一致', icon: 'none', duration: 2000 })
					return
				}
				registerAccess(this.formData).then(resp=>{
					console.log(resp)
					if(resp.code==200){
						uni.showToast({ title: resp.message, icon: 'success', duration: 2000})
						setTimeout(function(){
							uni.navigateTo({
								url: '/pages/users/login/index'
							})
						},2000)
					}else{
						uni.showToast({ title: resp.message, icon: 'none', duration: 2000 })
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}
	.appLogin {
		margin-top: 60rpx;
	
		.hds {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			color: #B4B4B4;
	
			.line {
				width: 68rpx;
				height: 1rpx;
				background: #CCCCCC;
			}
	
			p {
				margin: 0 20rpx;
			}
		}
	
		.btn-wrapper {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;
	
			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
			}
	
			.apple-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 30rpx;
				background: #000;
				border-radius: 34rpx;
				font-size: 40rpx;
	
				.icon-s-pingguo {
					color: #fff;
					font-size: 40rpx;
				}
			}
	
			.iconfont {
				font-size: 40rpx;
				color: #fff;
			}
	
			.wx {
				margin-right: 30rpx;
				background-color: #61C64F;
			}
	
			.mima {
				background-color: #28B3E9;
			}
	
			.yanzheng {
				background-color: #F89C23;
			}
	
		}
	}
	
	.code img {
		width: 100%;
		height: 100%;
	}
	
	.acea-row.row-middle {
		input {
			margin-left: 20rpx;
			display: block;
		}
	}
	
	.login-wrapper {
		padding: 30rpx;
	
		.shading {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
	
			/* #ifdef APP-VUE */
			margin-top: 50rpx;
			/* #endif */
			/* #ifndef APP-VUE */
	
			margin-top: 200rpx;
			/* #endif */
	
	
			image {
				width: 180rpx;
				height: 180rpx;
			}
		}
	
		.whiteBg {
			margin-top: 100rpx;
	
			.list {
				border-radius: 16rpx;
				overflow: hidden;
	
				.item {
					border-bottom: 1px solid #F0F0F0;
					background: #fff;
	
					.row-middle {
						position: relative;
						padding: 16rpx 45rpx;
						
						.texts{
							flex: 1;
							font-size: 28rpx;
							height: 80rpx;
							line-height: 80rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
	
						input {
							flex: 1;
							font-size: 28rpx;
							height: 80rpx;
							line-height: 80rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
	
						.code {
							position: absolute;
							right: 30rpx;
							top: 50%;
							color: $theme-color;
							font-size: 26rpx;
							transform: translateY(-50%);
						}
					}
				}
			}
	
			.logon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 86rpx;
				margin-top: 80rpx;
				background-color: $theme-color;
				border-radius: 120rpx;
				color: #FFFFFF;
				font-size: 30rpx;
			}
	
			.tips {
				margin: 30rpx;
				text-align: center;
				color: #999;
			}
		}
	}
.registerDiv{
	    margin: 5px;
	    float: right;
	    color: #007aff;
}
</style>

